import React from 'react'
import './Home.less'
import { Layout,Card,Breadcrumb,Menu,Switch } from 'antd'
import { DollarOutlined, AimOutlined, CloudOutlined, 
        CloseOutlined, CheckOutlined, CompassOutlined} from '@ant-design/icons';
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import Pay from './Pay.jsx'
import Demand from './Demand.jsx'
import Cloud from './Cloud.jsx'

const { Header, Footer, Sider, Content } = Layout;

export default class Home extends React.Component {
    constructor() {
        super()
        this.state = {}
    }
    render() {
        return (
        <Route>
            <div className="Home">
            <Layout>
                <Header>
                    <Menu mode="horizontal">
                        <Menu.Item icon={<DollarOutlined />}>
                            <Link to="/home/pay">薪资分布</Link>
                        </Menu.Item>
                        <Menu.Item icon={<AimOutlined />}>
                            <Link to="/home/demand">需求分布</Link>
                        </Menu.Item>
                        <Menu.Item icon={<CloudOutlined />}>
                            <Link to="/home/cloud">词云</Link>
                        </Menu.Item>
                        <Menu.Item icon={<CompassOutlined />}>搜索排序</Menu.Item>
                    </Menu>
                </Header>
                <Content>
                    <Card>
                        <Breadcrumb>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                        </Breadcrumb>
                        <div id="container">
                            <Route path="/home" exact component={Demand}/>
                            <Route path="/home/demand"  component={Demand}/>
                            <Route path="/home/pay" component={Pay}/>
                            <Route path="/home/cloud" component={Cloud}/>
                        </div>
                    </Card>
                </Content>
            </Layout>
        </div>
        </Route>
        )
    }
}